<template>
    <!--个人地址新增-->
    <div class="contain">
        <a-alert message="考虑订单可能包含教材和服务费用，最终退款金额以财鑫同意的金额为准" type="info" show-icon />
        <a-form-model ref=form :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="退款原因 " prop="tuikuan_reson">
                <a-select v-model="form.tuikuan_reson" placeholder="请选择退款原因">
                    <a-select-option value="商品质量问题">
                        商品质量问题
                    </a-select-option>
                    <a-select-option value="商品错发、漏发">
                        商品错发、漏发
                    </a-select-option>
                    <a-select-option value="未按约定时间发货">
                        未按约定时间发货
                    </a-select-option>
                    <a-select-option value="我不想要了">
                        我不想要了
                    </a-select-option>
                    <a-select-option value="其他">
                        其他
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="退款金额" prop="tuikuan_fee">
                <a-input v-model="form.tuikuan_fee" prefix="￥" suffix="RMB"/>
            </a-form-model-item>
            <a-form-model-item label="退款照片">
                <a-upload
                        :action="$api.getAjaxUrl('def','upLoadImg')"
                        list-type="picture-card"
                        :file-list="fileList"
                        @change="handleChange"
                >
                    <div v-if="fileList.length < 1">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">
                            上传
                        </div>
                    </div>
                </a-upload>
            </a-form-model-item>
            <a-form-model-item style="text-align: center;margin-left: 40%">
                <a-button type="primary" html-type="submit" @click="onSubmit">
                    保存
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
export default {
    name: 'refundOrder',
    components: {
        /**/
    },
    data() {
        return {
            labelCol: { span: 8 },
            wrapperCol: { span: 8 },
            fileList: [],
            form: {
                order_id: '',
                tuikuan_reson: null,
                tuikuan_fee: null,
            },
            rules: {
                tuikuan_reson: [{ required: true, message: '请选择退款原因', trigger: 'change' }],
                tuikuan_fee: [{ required: true, message: '请输入开票金额', trigger: 'change' }],
            }
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {
                return {
                }
            }
        }
    },
    watch: {
        order(val) {
            this.form = Object.assign({},{
                order_id: val.id,
                tuikuan_fee: val
            })
        }
    },
    mounted() {
        let val = this.order;
        this.form =Object.assign({},{
            order_id: val.id,
            tuikuan_fee: val.pay_fee
        })
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let data = Object.assign(this.form,{
                        pic_url: this.fileList.length>0?this.fileList[0].response.obj: null
                    });
                    this.$api.ajaxData({
                        pathName: 'doApplyRebund',
                        authorization: true,
                        method: 'post',
                        data: Object.assign(data)
                    }).then(() =>{
                        this.$notification.open({
                            message: '信息提示',
                            description: '退款申请成功，请耐心等待结果'
                        });
                        this.$emit('submit');
                    });
                } else {
                    return false;
                }
            });
        },
        handleChange({ fileList }) {
            console.log(fileList)
//            if(fileList[0].response.code === 200) {
//
//            }
            this.fileList = fileList;
            if(fileList[fileList.length -1].response && fileList[fileList.length -1].response.code !== 200) {
                this.fileList = [];
            }
        },
    }
};
</script>
<style scoped lang="scss">
.contain {
    padding: 3px 5px;
    background: #fff;
    .title {
        height: 50px;
        margin: 0 20px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }
    .content {
        padding: 40px 0 40px 20px;
        .address-box {
            li {
                position: relative;
                float: left;
                width: 33.33%;
                padding: 15px 10px;
                margin-right: 20px;
                height: 180px;
                font-size: 13px;
                color: #333333;
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                &.address {
                    .default-tag {
                        position: absolute;
                        top: 3px;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #FFFFFF;
                        background: #ff8080;
                    }
                    .form {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 20px;
                        .label {
                            flex-shrink: 0;
                            width: 70px;
                        }
                        .value {

                        }
                    }
                    .option {
                        .option-btn {
                            float: left;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 10px;
                            color: #999;
                            border: 1px solid #e4e4e4;
                            border-radius: 3px;
                            text-align: center;
                            cursor: pointer;
                        }
                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                }
                &.add-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px dashed #e4e4e4;
                    text-align: center;
                    cursor: pointer;
                    span {
                        font-size: 20px;
                        color: #666666;
                        line-height: 28px;
                    }
                }
            }

        }&:after {
             content: '';
             display: block;
             clear: both;
         }
    }
}
</style>
